<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>
    <!-- 下拉框 -->
    <div class="LSelect_root" :style="`width: ${width}px`">
      <span class="label">{{ label }}</span>
      <el-select v-model="value" placeholder="请选择" size="mini" style="flex: 1">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <!-- 主要内容 -->
    <div class="content">
      <div class="main" v-if="value == 1">
        <img src="../../../assets/img/636822135594494925.png" alt />
        <fixedPoint1 :top="(top = 16)" :left="(left = 29)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 16)" :left="(left = 33)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 16)" :left="(left = 43.2)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 16)" :left="(left = 47)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 16)" :left="(left = 59)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 16)" :left="(left = 61.8)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 29.4)" :left="(left = 28.4)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 29.4)" :left="(left = 45)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 33.5)" :left="(left = 27.5)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 33.2)" :left="(left = 44.8)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 42.5)" :left="(left = 25.5)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 42.8)" :left="(left = 44.3)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 52.8)" :left="(left = 25.8)" :background="background" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 52.8)" :left="(left = 36)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 57)" :left="(left = 25)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 57)" :left="(left = 35.5)" :background="background" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <div class="fixed" @click="
            (pop1_2 = true),
              (activeName = 'first'),
              (time1_2 = [new Date(), new Date()])
          ">
          <div>室外温度：4.3℃</div>
          <div>室外湿度：41.1%</div>
        </div>
        <div class="fixed fixed-1" @click="
            (pop1_2 = true),
              (activeName = 'first'),
              (time1_2 = [new Date(), new Date()])
          ">
          <div>供水温度：8.0℃</div>
          <div>回水温度：7.1℃</div>
        </div>
      </div>
      <div class="main" v-if="value == 2">
        <img src="../../../assets/img/636823051891058220.png" alt />
        <fixedPoint1 :top="(top = 7.5)" :left="(left = 31)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 7.5)" :left="(left = 35.2)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 7.5)" :left="(left = 39.5)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 7.5)" :left="(left = 43.8)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <div class="fixed fixed-2" @click="
            (pop1_2 = true),
              (activeName = 'first'),
              (time1_2 = [new Date(), new Date()])
          ">
          <div>供水压力：0.09MPA</div>
          <div>供水温度：29.7℃</div>
        </div>
        <div class="fixed fixed-3" @click="
            (pop1_2 = true),
              (activeName = 'first'),
              (time1_2 = [new Date(), new Date()])
          ">
          <div>回水压力：0.24MPA</div>
          <div>回水温度：25.3℃</div>
        </div>
      </div>
    </div>

    <!-- 图片1-1弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="pop1_1" title="历史曲线展示" width="35%" :before-close="handleClose1_1">
        <span style="color: #fff">选择时间：</span>
        <el-date-picker v-model="time1_1" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        <el-button type="primary" style="margin-left: 15px">载入数据</el-button>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="曲线展示" name="first">
            <echarts2></echarts2>
          </el-tab-pane>
          <el-tab-pane label="数据展示" name="second">
            <div class="pane">
              <div class="btn">
                <div @click="expportCSV1_1">保存为csv格式</div>
                <div @click="expportExcel1_1">保存为excel格式</div>
                <div @click="expportPDF1_1">保存为pdf格式</div>
              </div>
              <el-table :data="tableData1_1" style="width: 100%" border class="table" height="315px" id="table">
                <el-table-column prop="time" label="日期"></el-table-column>
                <el-table-column prop="data" label="数据"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>

    <!-- 图片1-2弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="pop1_2" title="历史曲线展示" width="35%" :before-close="handleClose1_2">
        <span style="color: #fff">选择时间：</span>
        <el-date-picker v-model="time1_2" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        <el-button type="primary" style="margin-left: 15px">载入数据</el-button>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="曲线展示" name="first">
            <echarts3></echarts3>
          </el-tab-pane>
          <el-tab-pane label="数据展示" name="second">
            <div class="pane">
              <div class="btn">
                <div @click="expportCSV1_2">保存为csv格式</div>
                <div @click="expportExcel1_2">保存为excel格式</div>
                <div @click="expportPDF1_2">保存为pdf格式</div>
              </div>
              <el-table :data="tableData1_2" style="width: 100%" border class="table" height="315px" id="table2">
                <el-table-column prop="time" label="日期"></el-table-column>
                <el-table-column prop="data" label="数据"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import echarts2 from "@/components/echarts2.vue";
import echarts3 from "@/components/echarts3.vue";
import fixedPoint1 from "@/components/fixedPoint1.vue";
import CsvExportor from "csv-exportor"; //导出csv
import htmlToPdf from "@/utils/htmlToPdf"; //导出pdf

export default {
  components: {
    echarts2,
    echarts3,
    fixedPoint1,
    Header,
  },
  data() {
    return {
      title: "设备监控—冷热源系统",
      background: "rgb(20, 189, 152)",
      width: 330,
      label: " 楼层",
      value: 1,
      options: [
        {
          value: 1,
          label: "大机房冷热源",
        },
        {
          value: 2,
          label: "小机房冷热源",
        },
      ],
      pop1_1: false,
      activeName: "first",
      time1_1: [new Date(), new Date()],
      tableData1_1: [
        { time: "2022-01-12 01:00", data: "0.00" },
        { time: "2022-01-12 01:00", data: "0.08" },
        { time: "2022-01-12 02:00", data: "1.00" },
        { time: "2022-01-12 03:00", data: "1.50" },
        { time: "2022-01-12 04:00", data: "2.00" },
        { time: "2022-01-12 05:00", data: "0.00" },
        { time: "2022-01-12 06:00", data: "1.30" },
        { time: "2022-01-12 07:00", data: "2.40" },
        { time: "2022-01-12 08:00", data: "1.00" },
        { time: "2022-01-12 09:00", data: "1.20" },
      ],

      pop1_2: false,
      time1_2: [new Date(), new Date()],
      tableData1_2: [
        { time: "2022-01-12 01:00", data: "7.00" },
        { time: "2022-01-12 01:00", data: "7.08" },
        { time: "2022-01-12 02:00", data: "7.00" },
        { time: "2022-01-12 03:00", data: "7.50" },
        { time: "2022-01-12 04:00", data: "7.00" },
        { time: "2022-01-12 05:00", data: "7.00" },
        { time: "2022-01-12 06:00", data: "7.30" },
        { time: "2022-01-12 07:00", data: "7.40" },
        { time: "2022-01-12 08:00", data: "7.00" },
        { time: "2022-01-12 09:00", data: "7.20" },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //导出CSV
    expportCSV1_1() {
      let tableData = this.tableData17_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "启停.csv");
    },
    //导出excel表格
    expportExcel1_1() {
      /** 
            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
            var html =
                "<html><head><meta charset='utf-8' /></head><body>" +
                document.getElementById("table").outerHTML +
                "</body></html>";
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var a = document.getElementsByTagName("a")[1];
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名
            a.download = "室内温度.xls";
            */
      let tableData = this.tableData1_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "启停.xls");
    },
    //导出pdf
    expportPDF1_1() {
      htmlToPdf.downloadPDF(document.getElementById("table"), "启停");
    },

    //导出CSV
    expportCSV1_2() {
      let tableData = this.tableData17_2;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "冷冻供水温设定.csv");
    },
    //导出excel表格
    expportExcel1_2() {
      let tableData = this.tableData1_2;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "冷冻供水温设定.xls");
    },
    //导出pdf
    expportPDF1_2() {
      htmlToPdf.downloadPDF(
        document.getElementById("table2"),
        "冷冻供水温设定"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 10px 0px 50px 0px;

  .main {
    position: relative;
    img {
      width: 80vw;
      height: 70vh;
      margin-left: 10vw;
    }

    .fixed {
      width: 180px;
      color: rgb(255, 255, 0);
      font-size: 8px;
      position: absolute;
      top: 12vh;
      left: 67vw;

      &:hover {
        cursor: pointer;
      }

      div {
        height: 25px;
        line-height: 1;
      }
    }

    .fixed-1 {
      top: 21vh;
      left: 26vw;
    }

    .fixed-2 {
      top: 58vh;
      left: 72.5vw;
    }

    .fixed-3 {
      top: 58vh;
      left: 61vw;
    }
  }
}

//下拉条样式
.LSelect_root {
  height: 40px;
  background-image: url("../../../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}

.pane {
  height: 400px !important;

  .btn {
    div {
      width: 120px;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      text-align: center;
      border: 1px solid rgba(225, 225, 225, 0.5);
      margin-right: 10px;
      color: #fff;
      border-radius: 5px;
    }
  }

  // 表格样式
  /deep/.el-table {
    margin-top: 15px;
    overflow: auto;
    background-color: transparent; //表格背景色
    --el-table-border-color: rgba(225, 225, 225, 0.5); //表格线
    --el-table-header-font-color: RGBA(114, 174, 255, 1); //栏目字体颜色
    --el-table-header-background-color: transparent; //栏目背景颜色
    --el-table-font-color: #72aeff; //内容字体颜色
    --el-table-tr-background-color: transparent; //表格背景色
    border-radius: 5px;

    .cell {
      text-align: center; //居中
    }

    th {
      padding: 0 !important;
      height: 35px;
      line-height: 35px;
      & > .cell {
        text-align: center; //居中
      }
    }

    td {
      padding: 0 !important;
      height: 35px;
      line-height: 35px;
    }
  }

  .page {
    position: relative;
    margin-top: 5px;
    /deep/.el-pagination {
      position: absolute;
      right: 10px;
      --el-pagination-font-color: #fff;
      --el-pagination-button-color: #fff;
    }
  }
}
</style>

<style scoped lang="less">
//弹出框标题样式
/deep/ .el-dialog {
  //  background-color: #2E5889;
  .el-dialog__title,
  .el-dialog__headerbtn {
    color: #fff; //弹出框标题
  }
  .el-dialog__body {
    padding: 5px 20px;
  }

  // 日期选择样式
  .el-range-editor.el-input__inner {
    border: 1px solid #ccc;
  }

  // to样式
  .el-date-editor .el-range-separator {
    width: 8%;
    color: #ccc;
  }
  // el-tabs样式
  .el-tabs__item {
    color: #fff;
    font-size: 12px;
    height: 30px;
    line-height: 30px !important;
    margin-top: 10px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    &:first-child {
      border-right: 1px solid #72aeff;
    }

    &:last-child {
      border-left: 1px solid #72aeff;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border: 1px solid #72aeff;
    border-bottom: none;
    color: #72aeff;
  }
}
</style>

